<template>
  <div>
    <h1>订单管理</h1>
    <template>
      <el-table :data="PageData.data" border style="width: 100%" class="orders-table">
        <el-table-column fixed prop="_id" label="订单编号" width="280"></el-table-column>
        <el-table-column prop="productsId.name" label="购买产品名称" width="200"></el-table-column>
        <el-table-column prop="salesmanId.userName" label="销售员" width="160"></el-table-column>
        <el-table-column prop="usersId.userName" label="购买者" width="160"></el-table-column>
        <el-table-column label="购买时间" width="190">
          <template slot-scope="scope">
            <span v-if="scope.row.time">{{scope.row.time}}</span>
            <span v-else>2020年9月21日 13:00</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="warning" :plain="true" @click="toDetail(scope.row._id)" class="fl">订单详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block orders-page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="PageData.currentPage-0"
        :page-sizes="[4, 5, 6]"
        :page-size="PageData.PageSize-0"
        layout="total, sizes, prev, pager, next, jumper"
        :total="PageData.total-0"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import api from "../../../network/apis/api";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  "orders"
);
export default {
  data() {
    return {
      type: "",
    };
  },

  created() {
    this.getOrders();
  },
  computed: {
    ...mapState(["PageData"]),
  },
  methods: {
    ...mapActions(["getOrders"]),

    //改变页面显示条数
    handleSizeChange(val) {
      this.PageData.pageSize = val;
      this.getOrders();
    },

    //修改当前页
    handleCurrentChange(val) {
      this.PageData.currentPage = val;
      this.getOrders();
    },

    //跳转到订单详情
    toDetail(_id) {
      console.log(_id);
      this.$router.push("/admin/orderDetails/" + _id);
    },
  },
};
</script>

<style scoped >
.orders-page {
  margin-top: 30px;
}
.orders-table {
  margin-top: 30px;
}
</style>